<template>
  <div class="body">
    <div style="height: 10px"></div>
    <div style="margin: 30px">
      <h1>{{ poet.name }} {{ poet.time }}</h1>
    </div>

    <div>
      <el-card class="detail">
        <template #header>
          <div style="height: 25px">
            <h2>诗人简介</h2>
          </div>
        </template>
        <p>
          <img class="carousel-image" :src="poet.img" :alt="nopicture" />
        </p>
        <p v-loading="Loading">{{ poet.summary }}</p>
      </el-card>
    </div>
    <div>
      <el-card class="detail">
        <template #header>
          <div style="height: 25px">
            <h2>诗人作品节选</h2>
          </div>
        </template>
        <el-space wrap>
          <el-card
            v-for="poem in poet.poems"
            :key="poem.id"
            style="width: 250px; height: 320px; background-color: #e6e9e0"
          >
            <template #header>
              <div style="height: 15px">
                <h4>{{ poem[0][0] }}</h4>
              </div>
            </template>
            <el-scrollbar height="200px">
              <p v-for="(line, index) in poem[1]" :key="index">
                {{ line }}
              </p></el-scrollbar
            >
          </el-card>
        </el-space>
      </el-card>
    </div>
    <div style="height: 10px"></div>
  </div>
</template>
  
  <script>
import axios from "axios";

export default {
  props: {},
  data() {
    return {
      poet: {},
      Loading: false,
    };
  },
  mounted() {
    this.fetchPoetDetails();
  },
  methods: {
    async fetchPoetDetails() {
      try {
        this.Loading = true;
        const poetId = this.$route.params.poetId;
        console.log("poetId", poetId);
        const response = await axios.get(`poetry/${poetId}`);
        this.Loading = false;
        this.poet = response.data;
        console.log("看看：", response.data);
      } catch (error) {
        console.error("Error fetching poet details:", error);
      }
    },
  },
};
</script>
<style scoped>
.body {
  background-color: rgb(226, 230, 219);
  height: auto;
}

h1 {
  font-family: "SuiFengTi";
  font-size: 50px;
  color: #333;
  margin: 0;
}
h2 {
  font-family: "SuiFengTi";
  font-size: 33px;
  color: #333;
  margin: 0;
}
/*诗人卡片*/
.detail {
  max-width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: #f0f0f0;
  margin-bottom: 50px;
}

/*无收录提示信息*/
.no-poet-message {
  font-size: 18px;
  color: #888;
  font-style: italic;
  height: 400px;
}
</style>
